/**
 * React.Fragment 内置组件，用于包裹
 * 
 *    <>
        <div className="box_item">A</div>
        <div className="box_item">B</div>
      </>

      <Fragment>
        <div className="box_item">A</div>
        <div className="box_item">B</div>
      </Fragment>

  createPortal() 
    作用：将组件的某一部分的元素渲染到组件层级之外的。（传送门 - Vue3 - Teleport）
    PS: 是 react-dom 这个模块的
    语法：
        createPortal(children: ReactNode, container: Element)

 *
 */

import { Component } from "react";
import { createPortal } from "react-dom";
import Hello from "./components/Hello";
import "./global.css";

export default class App extends Component {
  state = {
    show: true,
  };

  render() {
    return (
      <div>
        {createPortal(<h1>App</h1>, document.body)}

        <div className="box">
          {this.state.show && (
            <>
              <div className="box_item">A</div>
              <div className="box_item">B</div>
            </>
          )}

          <div className="box_item">C</div>
        </div>
      </div>
    );
  }
}
